<section class="mobile-users-new">
  <% content_for :mobile_menu do %>
  <a href=""></a>
  <% end %>
  <% content_for :app_back do %>
  <a href="javascript:void(0)" onclick="history.go(-1)">
    <i class="icon-arrow-left"></i>
  </a>
  <% end %>
  <% content_for :app_title do %>
    <div></div>
  <% end %>
  <% content_for :app_action do %>
  <a href=""></a>
  <% end %>
  <hr class="line">

  <div class="new-form">
      <div class="form-header">
          <div>
              <a href="/sign_in">登录</a>
          </div>
          <span style="font-size:24px;margin-top: 5px;color:#969696;">·</span>
          <div>
              <a href="/sign_up" class="active">注册</a>
          </div>
      </div>
      <div class="form-content">
        <vue-form :state="formstate" v-model="formstate" @submit.prevent="onSubmit" action="/users" method="POST">
          <div class="form-group">
              <%= flash_messages %>
          </div>

          <div class="row margin-reset">
            <div class="form-group">
                <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)">
                  <div class="col-xs-8 padding-reset">
                    <i class="icon-sign-in-user input-icon"></i>
                    <input type="text" name="user[mobile]" class="form-control private-input phone-input" required v-model.lazy="cellphone" placeholder="您的手机号码" aria-describedby="phone" cellphone-validator>
                  </div>
                  <div class="col-xs-4 padding-reset">
                    <cellphone-code type="uniq"></cellphone-code>
                  </div>

                  <field-messages name="user[mobile]" show="$touched || $submitted" class="col-xs-12 padding-reset error" style="margin-bottom: 10px;">
                    <div slot="required">请输入手机号</div>
                    <div slot="cellphone-validator">请输入正确的手机号</div>
                  </field-messages>
                </validate>
            </div>
          </div>

          <div class="form-group">
            <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)">
              <i class="icon-sign-in-safe input-icon"></i>
              <input type="text" name="user[sms_code]" class="form-control private-input" required v-model.lazy="model.smsCode" placeholder="验证码">

              <field-messages auto-label name="user[sms_code]" show="$touched || $submitted" class="error">
                <div slot="required">请输入短信验证码</div>
              </field-messages>

            </validate>
          </div>

          <div class="form-group">
            <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)">
              <i class="icon-sign-in-password input-icon"></i>
              <input type="password" name="user[password]" class="form-control private-input" required v-model.lazy="model.password" minlength="6" placeholder="密码">

              <field-messages auto-label name="user[password]" show="$touched || $submitted" class="error">
                <div slot="required">请输入密码</div>
                <div slot="minlength">密码至少6位</div>
              </field-messages>
            </validate>
          </div>

          <div class="form-group">
            <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)"  :custom="{passwordConfirmationValidator: passwordConfirmationValidator}">
              <i class="icon-sign-in-password input-icon"></i>
              <input type="password" name="user[password_confirmation]" class="form-control private-input" required v-model.lazy="model.passwordConfirmation" placeholder="确认密码">

              <field-messages auto-label name="user[password_confirmation]" show="$touched || $submitted" class="error">
                <div slot="required">请再次输入密码</div>
                <div slot="passwordConfirmationValidator">请确认两次密码输入一致</div>
              </field-messages>
            </validate>
          </div>

          <div class="form-group">
            <validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)">
              <div class="input boolean optional user_term_of_service">
                <input name="user[term_of_service]" type="hidden" value="0">
                <input class="boolean optional" type="checkbox" value="1" checked="checked" name="user[term_of_service]" required v-model.lazy="model.agreement">
                <label class="boolean optional" style="color: #969696;font-weight: initial;font-size:1.2rem;" for="user_term_of_service">&nbsp;&nbsp;我同意并遵守<a class="color-private" href="/agreement.html">《阳毅商城服务协议》</a></label>
              </div>
              <field-messages auto-label name="user[term_of_service]" show="$touched || $submitted" class="error">
                <div slot="required">请同意注册协议</div>
              </field-messages>
            </validate>
          </div>

          <div class="form-group">
            <% unless params[:invite_token].blank? %>
            <%= f.hidden_field :sys_invite_token, :value => params[:invite_token] %>
            <input type="hidden" name="user[on_mobile]" value="true">
            <% end %>
            <%= hidden_field_tag :authenticity_token, form_authenticity_token -%>
            <button class="btn btn-primary btn-block private-btn">立即注册</button>
             <!--private-btn btn-block submit-button-->
          </div>
      </vue-form>
  </div>
</section>
